<template>
    <div class="user_info">
        <van-nav-bar title="用户信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="top">
            <div class="verify">
                <i class="zx-icon">&#xe644;</i>&nbsp;&nbsp;已认证
            </div>
            <div class="headbox">
                <div class="head">
                     <div class="headbox2">
                         <img :src="user.headimgurl" alt="">
                         <!--<i @click="gotoInfoEdit('headimg')" class="zx-icon">&#xe6c9;</i>-->
                     </div>
                      <P class="username">{{user.nickname}} <i>{{user.sex==0?'♂ 男':'♀ 女'}} </i><!-- <em>23 岁</em>--></P>
                </div>
            </div>
        </div>
        <div class="works">
            <div class="box">
                <span>自我介绍</span>
                <div>
                    <i @click="show=!show" class="zx-icon">&#xe6c9;</i>
                   <div style="color:#626262;padding-right:20px;word-wrap:break-word;font-size: 14px; ">
                       {{desShow?desShow:'暂无数据'}}
                   </div>
                </div>
            </div>
        </div>
        <div class="works">
            <div class="box">
                <span>Ta的作品</span>
                <div>
                    <i @click="gotoInfoEdit('works')" class="zx-icon">&#xe6c9;</i>
                    <div>
                       <img @click="imgfn" v-for="(work,index) in work" :key="index" :src="work.imgurl" alt="">
                   </div>
                </div>
            </div>
        </div>
        <div class="baseinfo">
            <h3>基本信息<i @click="gotoInfoEdit('baseinfo')" class="zx-icon">&#xe6c9;</i></h3>
            <div>
                <p><span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span><i>{{userBaseInfo.uname}}</i></p>
                <p><span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span><i>{{userBaseInfo.sex}}</i></p>
                <p><span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</span><i>{{userBaseInfo.age}}</i></p>
                <p><span>手机号</span><i>{{userBaseInfo.contact}}</i></p>
                <p><span>qq</span><i>{{userBaseInfo.qq}}</i></p>
                <p><span>微信</span><i>{{userBaseInfo.wechat}}</i></p>
            </div>
        </div>
        <div v-show="false" class="baseinfo skill">
            <h3>技能信息<i @click="gotoInfoEdit('skill')" class="zx-icon">&#xe6c9;</i></h3>
            <div>
                <div class="item">
                    <p>Photoshop</p>
                    <van-progress :percentage="75" pivot-text="熟练"/>
                </div>
                <div class="item">
                    <p>Node</p>
                    <van-progress :percentage="35" pivot-text="了解"/>
                </div>
                <div class="item">
                    <p>Sketch</p>
                    <van-progress :percentage="60" pivot-text="熟悉"/>
                </div>
                <div class="item">
                    <p>webstorm</p>
                    <van-progress :percentage="90" pivot-text="精通"/>
                </div>
            </div>
        </div>
        <div v-show="edu" class="baseinfo edu">
            <h3>教育经历<i @click="gotoInfoEdit('edu')" class="zx-icon">&#xe6c9;</i></h3>
            <div v-if="edu">
                <p><span>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;校</span><i>{{edu.school}}</i></p>
                <p><span>专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</span><i>{{edu.speciality}}</i></p>
                <p><span>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</span><i>{{edu.record}}</i></p>
                <p><span>开始时间</span><i>{{edu.start_time}}</i></p>
                <p><span>结束时间</span><i>{{edu.end_time}}</i></p>
            </div>
        </div>
        <div v-show="false" class="baseinfo items">
            <h3>项目经历<i @click="gotoInfoEdit('items')" class="zx-icon">&#xe6c9;</i></h3>
            <div>
                <van-steps direction="vertical" :active="0" active-color="#f60">
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目名称】微信小程序</strong></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目名称】微信小程序</strong></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div v-show="false" class="baseinfo items">
            <h3>工作经历<i @click="gotoInfoEdit('jobs')" class="zx-icon">&#xe6c9;</i></h3>
            <div>
                <van-steps direction="vertical" :active="0" active-color="#f60">
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div class="baseinfo linsk">
            <h3>作品连接<i @click="gotoInfoEdit('links')" class="zx-icon">&#xe6c9;</i></h3>
            <div>
                <p v-for="(links,i) in links" :key="i"><a href="javascript:;" @click="gotoFn(links.links)">{{links.links}}</a></p>
            </div>
        </div>
        <van-dialog
                v-model="show"
                show-cancel-button
                :before-close="beforeClose"
        >
        <van-field
                label="自我介绍"
                type="textarea"
                placeholder="请输入自我介绍内容"
                rows="5"
                v-model="des"
                autosize
        />
        </van-dialog>
    </div>
</template>

<script>
    import {mapMutations,mapState} from 'vuex';
    import { ImagePreview } from 'vant';
    import { Progress,Field} from 'vant';
    import { Step, Steps } from 'vant';
    import Vue from 'vue';
    Vue.use(Step).use(Steps).use(ImagePreview).use(Field);
    Vue.use(Progress);
    export default {
        data(){
            return{
                des:'',
                user:'',
                userBaseInfo:'',
                work:[],
                links:'',
                show:false,
                edu:'',
                desShow:'',
            }
        },

        methods: {
            getDes(){
              this.$axios.post('/api/des/get',{uid:JSON.parse(localStorage.getItem('user')).uid}).then(res=>{
                  if(res.data.err_code ==0){
                      this.desShow = res.data.data.des;
                  }
              })
            },
            beforeClose(action, done) {
                if (action === 'confirm') {
                    if(this.des=='' || !this.des){
                        this.$toast('请输入自我介绍内容');
                        done();
                        this.show = true;
                    }else{
                        this.$axios.post('/api/des/create',{des:this.des,uid:JSON.parse(localStorage.getItem('user')).uid}).then(res=>{
                            if(res.data.err_code ==0){
                                this.des = ''
                               this.getDes();
                               done()
                            }
                        })
                    }
                    // setTimeout(done, 1000);
                } else {
                    done();
                }
            },
            addDes(){

            },
            imgfn(){
                let arr = []
                this.work.forEach(function (ele) {
                    arr.push(ele.imgurl)
                })
                ImagePreview(arr)
            },
            init(){
                let uid = ''
                if(localStorage.getItem('user')){
                    uid = this.$route.query.uid;
                };
                this.$post('/api/user/baseInfo',{uid:this.$route.query.uid}).then(res=>{
                    if(res.data.err_code == 0){
                        this.user = res.data.data;
                    }else{
                        //
                    }
                })
                this.userBaseInfoFn();
            },
            eduGet(){
              this.$post('/api/edu/get',{
                  uid:this.$route.query.uid
              }).then(res=>{
                if(res.data.err_code ==0){
                    this.edu = res.data.data;
                }else{
                    this.$toast({message:res.data.err_msg})
                }
              }).catch(()=>{
              //
              })
            },
            gotoInfoEdit(module){
                this.$router.push({'name':'info_edit',query:{module:module}})
            },
            onClickLeft() {
                history.back()
            },
            userBaseInfoFn(){
                this.$post('/api/user/getBaseUserInfo',{uid:this.$route.query.uid}).then(res=>{
                    if(res.data.err_code ==0){
                        this.userBaseInfo = res.data.data;
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            WorkGet(){
                let uid = '';
                uid = this.$route.query.uid;
                this.$post('/api/works/get',{uid}).then(res=>{
                    console.log(res)
                    if(res.data.err_code ==0){
                        this.work = res.data.data;
                    }
                }).catch(()=>{
                    //
                })
            },
            LinksGet(){
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = this.$route.query.uid;
                }
                this.$post('/api/links/get', {uid}).then(res => {
                    console.log(res)
                    if (res.data.err_code == 0) {
                        this.links = res.data.data;
                    }
                }).catch(() => {
                    //
                })
            },
        },
        created(){
            this.getDes();
            this.eduGet();
            this.LinksGet();
            this.init();
            this.WorkGet();
            document.body.style.backgroundColor='rgb(239, 243, 246)'
        }
    }
</script>

<style lang="less" scoped>
@import "../../public/css/user_info_edit.less";
</style>
